<template>
  <div>
    <h1>欢迎光临_vue来发的收银系统_水果店</h1>
    <table>
      <tr>
        <td>苹果10￥/斤，折扣8折</td>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数：<input type="number" value="0" v-model="full" />
        </td>
      </tr>
      <tr>
        <td>
          <button @click="btn">结账买单</button>
        </td>
      </tr>
      <tr>
        <td>
          结账单：总价{{ totalPrice }}￥元,折后价：{{ reprice }}￥元,省了:{{
            saveprice
          }}￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      full: '',
      totalPrice: '',
      reprice: '',
      saveprice: '',
    }
  },
  methods: {
    btn() {
      this.totalPrice = this.full * 10
      this.reprice = this.totalPrice * 0.8
      this.saveprice = this.totalPrice * 0.2
    },
  },
}
</script>

<style>
table {
  border: 1px solid #000;
  text-align: center;
}

td {
  border: 1px solid #000;
}
</style>
